<template>
    <transition>
        <div class="tips">
            <p>{{tipsText}}</p>
        </div>
    </transition>
</template>

<script>
    export default {
        name:"Tips-Component",
        props:['tipsText']
    }
</script>

<style scoped lang="less">
    .tips{
        // width: 300px;
        height: 16vw;
        background: #00000069;
        border-radius: 1.3vw;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3.7vw;
        position: fixed;
        left: 50%;
        top:50%;
        transform: translate(-50%,-50%);
        color: #fff;
        transition: .3s;

        p{
            padding: 0 2.7vw;
        }
    }
    .v-enter,.v-leave-to{
        opacity: 0;
    }

    .v-enter-to,.v-leave{
        opacity: 1;
    }
</style>